import 'package:flutter/material.dart';
import 'package:flutter_roujiaosuo/ui/detail.dart';

class HomeListItem extends StatelessWidget {
  const HomeListItem({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          ListHead(),
          ListItem(),
          SizedBox(
            height: 10,
            child: Container(
              color: Colors.grey[100],
            ),
          )
        ],
      ),
    );
  }
}

class ListHead extends StatelessWidget {
  const ListHead({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Container(
        height: 30,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.only(left: 5, right: 5),
                    height: 15,
                    width: 3,
                    color: Colors.red[500],
                  ),
                  Text('家庭保洁')
                ],
              ),
            ),
            Text('更多》')
          ],
        ),
      ),
    );
  }
}

class ListItem extends StatefulWidget {
  @override
  _ListItemState createState() => _ListItemState();
}

class _ListItemState extends State<ListItem> {
  List list = [
    {
      "imgUrl":
          'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRGZTJLBqIWbOOvpVX4aSctZqF2DKqX-jGcug59iGuZlXTc2nN6',
      'title': '日常保洁',
      'price': '30',
      'unit': '小时',
      'shop': '超级玛丽家政'
    },
    {
      "imgUrl":
          'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRGZTJLBqIWbOOvpVX4aSctZqF2DKqX-jGcug59iGuZlXTc2nN6',
      'title': '日常保洁',
      'price': '30',
      'unit': '小时',
      'shop': '超级玛丽家政'
    },
    {
      "imgUrl":
          'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRGZTJLBqIWbOOvpVX4aSctZqF2DKqX-jGcug59iGuZlXTc2nN6',
      'title': '日常保洁',
      'price': '30',
      'unit': '小时',
      'shop': '超级玛丽家政'
    },
  ];
  @override
  Widget build(BuildContext context) {
    List<Widget> _buildItem(items) {
      List<Widget> list = List<Widget>();
      for (var item in items) {
        list.add(Item(
          title: item['title'],
          price: item['price'],
          unit: item['unit'],
          shop: item['shop'],
          imageUrl: item['imgUrl'],
        ));
      }
      return list;
    }

    return Wrap(
      children: _buildItem(list),
    );
    // ListView.builder(
    //   itemCount: 10,
    //   itemExtent: 140,
    //   scrollDirection: Axis.horizontal,
    //   itemBuilder: (context, index) {
    //     return Container(
    //       color: Colors.redAccent,
    //     );
    //   },
    // );
  }
}

class Item extends StatelessWidget {
  const Item(
      {Key key, this.title, this.price, this.imageUrl, this.unit, this.shop})
      : super(key: key);
  final String title;
  final String imageUrl;
  final String price;
  final String unit;
  final String shop;
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        Navigator.push(context, MaterialPageRoute(builder: (context) {
          return Detail(title: this.title);
        }));
      },
      child: Container(
          child: SizedBox(
        width: MediaQuery.of(context).size.width / 3,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              height: MediaQuery.of(context).size.width / 3 - 10,
              margin: EdgeInsets.all(5),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(5)),
                image: DecorationImage(
                  image: NetworkImage(
                      'https://p.ssl.qhimg.com/dmfd/400_300_/t0120b2f23b554b8402.jpg'),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(left: 5),
              child: Text(
                '${this.title}',
                style: TextStyle(color: Colors.black87),
              ),
            ),
            // Image.network(this.imageUrl, fit: BoxFit.cover),
            Padding(
              padding: EdgeInsets.only(left: 5),
              child: Row(
                children: <Widget>[
                  Text(
                    '${this.price}',
                    style: TextStyle(
                        fontWeight: FontWeight.bold, color: Colors.red),
                  ),
                  Text(
                    '元/${this.unit}',
                    style: TextStyle(fontSize: 12, color: Colors.red),
                  ),
                ],
              ),
            ),

            Padding(
              padding: EdgeInsets.only(left: 5),
              child: Text(
                '${this.shop}',
                style: TextStyle(fontSize: 12, color: Colors.grey),
              ),
            ),
          ],
        ),
      )),
    );
  }
}
